import React, { useState, useRef, useEffect } from 'react'
import { Button, Tag, Modal, Form, message, Table, Card } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { ExclamationCircleOutlined } from '@ant-design/icons'
import request from '@/utils/request'
import OperaPrompt from '../../../components/OperaPrompt'
import SaveView from './save'
const { confirm } = Modal
export default () => {
    const [visable, setVisable] = useState(false)
    const [saveForm] = Form.useForm()
    const [id, setId] = useState(0)
    const ref = useRef<any>();
    const [tableData, setTableData] = useState({ list: [], total: 0 })
    const columns: any = [
        {
            title: '标签名称',
            dataIndex: 'title',
        },
        {
            title: '备注',
            render: (text: any) => text,
            align: "center",
            dataIndex: 'remark',
            hideInSearch: true,
        },

        {
            title: '创建时间',
            render: (text: any) => <Tag color="cyan">{text} </Tag>,
            align: "center",
            dataIndex: 'created_at',
            hideInSearch: true,
        },
        {
            title: '排序',
            render: (text: any) => <Tag color="cyan">{text} </Tag>,
            align: "center",
            dataIndex: 'sort',
            hideInSearch: true,
        },
        {
            title: '操作',
            align: "center",
            render: (text: any, record: any) => (
                <>
                    <Button size="small" type="primary" ghost style={{ marginRight: "6px" }} onClick={() => {
                        setId(record.id)
                        setVisable(true)
                        request(`/member/tag-detail/${record.id}`).then((result) => {
                            const data = result.data;
                            saveForm.setFieldsValue(data)
                        })
                    }}>编辑</Button>
                    <Button size="small" danger onClick={() => {
                        destroy([record.id])
                    }}>删除</Button>
                </>
            ),
        },
    ];

    const destroy = (ids: any[]) => {
        confirm({
            title: 'Do you Want to delete these items?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                request(`/member/tag-destroy`, {
                    method: "Delete",
                    params: { ids }
                }).then((result) => {
                    message.success("删除成功", 1, () => {
                        ref.current.reload()
                    })

                })
            }
        });
    }


    const getList = (params: any = {}) => {
        request(`/member/tag-list`, { params: { pageSize: 15, ...params } }).then((result) => {
            const { list, total } = result.data
            setTableData({ list, total })
        })
    }

    useEffect(() => {
        getList()
    }, [])
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <OperaPrompt dataList={[
                    "会员标签是平台为了更加有效的对会员进行管理和分组。",
                    "用户可以针对会员设置相应的标签，方便查找和管理。",
                ]} />

                <div style={{ padding: "8px 0" }}>
                    <Button type="primary" onClick={() => {
                        saveForm.resetFields()
                        setVisable(true)
                        setId(0)
                    }}>
                        添加
                    </Button>
                </div>
                <Table
                    rowKey="id"
                    columns={columns}
                    dataSource={tableData.list}
                />
            </Card>
            <Modal
                width="650px"
                title="标签"
                visible={visable}
                onOk={() => saveForm.submit()}
                onCancel={() => setVisable(false)}
                getContainer={false}
            >
                <SaveView saveForm={saveForm} close={() => setVisable(false)} id={id} tableRef={ref} />
            </Modal>
        </PageHeaderWrapper>
    )
}